/* Font Icons */

.icon {
    display: inline-block;
    font-family: 'ios7-icon';
    -webkit-text-rendering: geometricPrecision;
    -moz-text-rendering: geometricPrecision;
    -ms-text-rendering: geometricPrecision;
    -o-text-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-style: normal;
    text-shadow: none;
}

[class*="sa-"] {
    background-position: center;
    background-repeat: no-repeat;
}


/* Left Menu */

[class*="sa-side-"] {
    width: 44px;
    height: 44px;
}

.sa-side-home {
    background-image: url(../img/icon/home.png);
}

.sa-side-typography {
    background-image: url(../img/icon/typography.png);
}

.sa-side-widget {
    background-image: url(../img/icon/widgets.png);
}

.sa-side-table {
    background-image: url(../img/icon/table.png);
}

.sa-side-form {
    background-image: url(../img/icon/form.png);
}

.sa-side-ui {
    background-image: url(../img/icon/ui.png);
}

.sa-side-folder {
    background-image: url(../img/icon/folder.png);
}

.sa-side-calendar {
    background-image: url(../img/icon/calendar.png);
}

.sa-side-page {
    background-image: url(../img/icon/pages.png);
}

.sa-side-chart {
    background-image: url(../img/icon/chart.png);
}

.sa-side-photos {
    background-image: url(../img/icon/photos.png);
}


/* Top Menu */

[class*="sa-top-"] {
    width: 40px;
    height: 48px;
    float: left;
}

.sa-top-message {
    background-image: url(../img/icon/message.png);
}

.sa-top-updates {
    background-image: url(../img/icon/updates.png);
}


/* Editor */

[class*="editor-"] {
    width: 13px;
    height: 22px;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}

.editor-text {
    background-image: url(../img/editor/text.png);
}

.editor-bold {
    background-image: url(../img/editor/bold.png);
}

.editor-italic {
    background-image: url(../img/editor/italic.png);
}

.editor-underline {
    background-image: url(../img/editor/underline.png);
}

.editor-unstyle {
    background-image: url(../img/editor/unstyle.png);
}

.editor-unlist {
    background-image: url(../img/editor/unlist.png);
}

.editor-orderlist {
    background-image: url(../img/editor/orderlist.png);
}

.editor-align {
    background-image: url(../img/editor/align.png);
}

.editor-line-height {
    background-image: url(../img/editor/line-height.png);
}

.editor-table {
    background-image: url(../img/editor/table.png);
}

.editor-link {
    background-image: url(../img/editor/link.png);
}

.editor-picture {
    background-image: url(../img/editor/picture.png);
}

.editor-video {
    background-image: url(../img/editor/video.png);
}

.editor-full-screen {
    background-image: url(../img/editor/full-screen.png);
}

.editor-code {
    background-image: url(../img/editor/code.png);
}

.editor-help {
    background-image: url(../img/editor/help.png);
}

.editor-font {
    background-image: url(../img/editor/font.png);
}

.editor-heading {
    background-image: url(../img/editor/heading.png);
}


/* List Icons */

[class*="sa-list-"] {
    display: inline-block;
    height: 21px;
    width: 21px;
    background-position: center;
    background-repeat: no-repeat;
}

.sa-list-add {
    background-image: url(../img/icon/add.png);
}

.sa-list-refresh {
    background-image: url(../img/icon/refresh.png);
}

.sa-list-move {
    background-image: url(../img/icon/move.png);
}

.sa-list-delete {
    background-image: url(../img/icon/delete.png);
}

.sa-list-back {
    background-image: url(../img/icon/back.png);
}

.sa-list-forwad {
    background-image: url(../img/icon/forwad.png);
}

.sa-list-day {
    background-image: url(../img/icon/day.png);
}

.sa-list-week {
    background-image: url(../img/icon/week.png);
}

.sa-list-month {
    background-image: url(../img/icon/month.png);
}

.sa-list-spam {
    background-image: url(../img/icon/spam.png);
}

.sa-list-archive {
    background-image: url(../img/icon/archive.png);
}


/* Others */

#menu-toggle {
    background-image: url(../img/icon/menu.png);
}


/* Form */

.sa-plus {
    width: 13px;
    height: 13px;
    background-image: url(../img/icon/plus-sm.png);
    display: inline-block;
}


/* For Higher DPI */

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 120dpi),
only screen and ( min-resolution: 1.25dppx) {
    /* Left Menu */
    .sa-side-typography,
    .sa-side-widget,
    .sa-side-table,
    .sa-side-ui,
    .sa-side-folder {
        background-size: 23px 21px;
    }
    .sa-side-home {
        background-image: url(../img/icon/home@2x.png);
        background-size: 25px 25px;
    }
    .sa-side-typography {
        background-image: url(../img/icon/typography@2x.png);
    }
    .sa-side-widget {
        background-image: url(../img/icon/widgets@2x.png);
    }
    .sa-side-table {
        background-image: url(../img/icon/table@2x.png);
    }
    .sa-side-form {
        background-image: url(../img/icon/form@2x.png);
        background-size: 19px 25px;
    }
    .sa-side-ui {
        background-image: url(../img/icon/ui@2x.png);
    }
    .sa-side-folder {
        background-image: url(../img/icon/folder@2x.png);
    }
    .sa-side-calendar {
        background-image: url(../img/icon/calendar@2x.png);
        background-size: 23px 23px;
    }
    .sa-side-page {
        background-image: url(../img/icon/pages@2x.png);
        background-size: 25px 21px;
    }
    .sa-side-chart {
        background-image: url(../img/icon/chart@2x.png);
        background-size: 24px 19px;
    }
    .sa-side-photos {
        background-image: url(../img/icon/photos@2x.png);
        background-size: 23px 19px;
    }
    /* Top Menu */
    .sa-top-message {
        background-image: url(../img/icon/message@2x.png);
        background-size: 25px 17px;
    }
    .sa-top-updates {
        background-image: url(../img/icon/updates@2x.png);
        background-size: 25px 25px;
    }
    /* Editor */
    .editor-text {
        background-image: url(../img/editor/text@2x.png);
        background-size: 11px 13px;
    }
    .editor-bold {
        background-image: url(../img/editor/bold@2x.png);
        background-size: 10px 13px;
    }
    .editor-italic {
        background-image: url(../img/editor/italic@2x.png);
        background-size: 5px 13px;
    }
    .editor-underline {
        background-image: url(../img/editor/underline@2x.png);
        background-size: 10px 13px;
    }
    .editor-unstyle {
        background-image: url(../img/editor/unstyle@2x.png);
        background-size: 11px 13px;
    }
    .editor-unlist {
        background-image: url(../img/editor/unlist@2x.png);
        background-size: 13px 13px;
    }
    .editor-orderlist {
        background-image: url(../img/editor/orderlist@2x.png);
        background-size: 13px 13px;
    }
    .editor-align {
        background-image: url(../img/editor/align@2x.png);
        background-size: 13px 13px;
    }
    .editor-line-height {
        background-image: url(../img/editor/line-height@2x.png);
        background-size: 11px 13px;
    }
    .editor-table {
        background-image: url(../img/editor/table@2x.png);
        background-size: 13px 13px;
    }
    .editor-link {
        background-image: url(../img/editor/link@2x.png);
        background-size: 9px 13px;
    }
    .editor-picture {
        background-image: url(../img/editor/picture@2x.png);
        background-size: 13px 13px;
    }
    .editor-video {
        background-image: url(../img/editor/video@2x.png);
        background-size: 13px 13px;
    }
    .editor-full-screen {
        background-image: url(../img/editor/full-screen@2x.png);
        background-size: 13px 13px;
    }
    .editor-code {
        background-image: url(../img/editor/code@2x.png);
        background-size: 10px 13px;
    }
    .editor-help {
        background-image: url(../img/editor/help@2x.png);
        background-size: 10px 13px;
    }
    .editor-font {
        background-image: url(../img/editor/font@2x.png);
        background-size: 10px 13px;
    }
    .editor-heading {
        background-image: url(../img/editor/heading@2x.png);
        background-size: 10px 13px;
    }
    /* List Icons */
    .sa-list-add {
        background-image: url(../img/icon/add@2x.png);
        background-size: 19px 19px;
    }
    .sa-list-refresh {
        background-image: url(../img/icon/refresh@2x.png);
        background-size: 18px 19px;
    }
    .sa-list-move {
        background-image: url(../img/icon/move@2x.png);
        background-size: 19px 19px;
    }
    .sa-list-delete {
        background-image: url(../img/icon/delete@2x.png);
        background-size: 15px 19px;
    }
    .sa-list-back {
        background-image: url(../img/icon/back@2x.png);
        background-size: 12px 21px;
    }
    .sa-list-forwad {
        background-image: url(../img/icon/forwad@2x.png);
        background-size: 12px 21px;
    }
    .sa-list-day {
        background-image: url(../img/icon/day@2x.png);
        background-size: 21px 21px;
    }
    .sa-list-week {
        background-image: url(../img/icon/week@2x.png);
        background-size: 21px 21px;
    }
    .sa-list-month {
        background-image: url(../img/icon/month@2x.png);
        background-size: 21px 21px;
    }
    .sa-list-spam {
        background-image: url(../img/icon/spam@2x.png);
        background-size: 17px 17px;
    }
    .sa-list-archive {
        background-image: url(../img/icon/archive@2x.png);
        background-size: 17px 17px;
    }
    /* Form */
    .sa-plus {
        background-image: url(../img/icon/plus-sm@2x.png);
        background-size: 13px 13px;
    }
    /* Others */
    #menu-toggle {
        background-image: url(../img/icon/menu@2x.png);
        background-size: 18px 13px;
    }
    .main-search {
        background-image: url(../img/icon/search@2x.png);
        background-size: 25px 25px;
    }
    .tile-config>.tile-menu {
        background-image: url(../img/icon/tile-actions@2x.png);
        background-size: 13px 3px;
    }
    .message-search:not(:focus) {
        background-image: url(../img/icon/search@2x.png);
        background-size: 25px 25px;
    }
}